<template>
  <div class="c-list-content">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <van-cell>
          <div class="c-list-content">
            <combineCollectBox></combineCollectBox>
            <combineCollectBox></combineCollectBox>
            <combineCollectBox></combineCollectBox>
            <combineCollectBox></combineCollectBox>
            <combineCollectBox></combineCollectBox>
            <combineCollectBox></combineCollectBox>
            <combineCollectBox></combineCollectBox>
            <combineCollectBox></combineCollectBox>
            <combineCollectBox></combineCollectBox>
            <combineCollectBox></combineCollectBox>
            <combineCollectBox></combineCollectBox>
            <combineCollectBox></combineCollectBox>
            <combineCollectBox></combineCollectBox>
            <combineCollectBox></combineCollectBox>
            <combineCollectBox></combineCollectBox>
            <combineCollectBox></combineCollectBox>
            <combineCollectBox></combineCollectBox>
            <combineCollectBox></combineCollectBox>
            <combineCollectBox></combineCollectBox>
            <combineCollectBox></combineCollectBox>
            <combineCollectBox></combineCollectBox>
          </div>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { ref } from 'vue'
import combineCollectBox from '@/components/video-box/combine-collect-box'
export default {
  components: {
    combineCollectBox
  },
  setup() {
    const list = ref([])
    const loading = ref(false)
    const finished = ref(false)
    const refreshing = ref(false)

    const onLoad = () => {
      setTimeout(() => {
        if (refreshing.value) {
          list.value = []
          refreshing.value = false
        }

        for (let i = 0; i < 10; i++) {
          list.value.push(list.value.length + 1)
        }
        loading.value = false

        if (list.value.length >= 10) {
          finished.value = true
        }
      }, 1000)
    }

    const onRefresh = () => {
      // 清空列表数据
      finished.value = false

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      loading.value = true
      onLoad()
    }

    return {
      list,
      onLoad,
      loading,
      finished,
      onRefresh,
      refreshing
    }
  }
}
</script>

<style>
.c-list-content {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
</style>
